import Vue from 'vue'
import Vuex from 'vuex'

// 下面是注册vuex插件
Vue.use(Vuex)

// 创建全局仓库
const store = new Vuex.Store({
  // 下面这句话表示严格模式，严格遵循单向数据流。 vuex的全局数据只能vuex自己改，别人不能改
  // 这个概念类似于vue的props值，vue也是单向数据流，数据只能父组件改了传递给子组件，子组件不能修改父组件的值
  strict: true,
  // state就是全局状态，也叫全局数据
  // 以前在组件里面 data是当前组件自己的数据  props是父组件传递进来的数据
  state: {
    count: 100,
    msg: 'hello',
    title: '黑马95期',
    list: [1,2,3,4,5,6,7]
  },
  getters: {
    jishu(state){
      console.log('getters里面的this: ', this);
      return state.list.filter(item => item % 2 !== 0)
    },
    twoList(state) {
      return state.list.map(item => item*item)
    }
  },
  // vuex修改自己状态的操作，都必须放在 mutations 的函数里面
  // mutations里面只能放同步操作
  mutations: {
    // 函数的第一个参数就是 全局仓库的值, vuex里面所有对state状态值的修改，都要在mutations里面
    // mutations的函数，一般有两个参数，第一个参数是全局仓库对象， 第二个参数就是调用mutations传递过来的参数
    // mutations的参数在官网里面 也叫 载荷 payload
    addCountMutations(state, payload){
      console.log('我是mutaitonss:', payload);
      state.count += payload
    },
    updateTitleMutation(state) {
      state.title = "我是最棒的"
    },
    updateCountMutations(state, payload) {
      // 这个是在mutationss里面放异步操作
      // setTimeout(() => {
      //   state.count = payload
      // }, 1000);
      state.count = payload
    }
  },
  // 如果想要异步修改state里面的数据，需要在actions里面定义函数
  actions: {
    updateCountActions(context, payload){
      // 这个context就是一个 小型的store对象，里面可以访问commit dispatch
      // 意思就是说可以 调用mutations 可以调用其他的actions
      setTimeout(() => {
        // state.count = payload
        // console.log(111, context, payload);
        // 整个vuex里面就只有 mutations可以修改数据，在actions里面 异步操作后面
        // 通过context去 提交commit一个mutations即可
        context.commit('updateCountMutations', payload)
      }, 1000);
    }
  }
})

// 默认导出
export default store
